<template>
  <el-dialog
    v-model="dialogVisible"
    title="插件详情"
    class="plugin-detail-dialog"
    :close-on-click-modal="false"
    :show-close="true"
  >
    <div v-if="plugin" class="detail-content">
      <!-- 基本信息 -->
      <div class="info-section">
        <h3 class="section-title">基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">插件 ID</span>
            <span class="info-value">{{ plugin.id }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">插件名称</span>
            <span class="info-value">{{ plugin.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">版本</span>
            <span class="info-value">{{ plugin.version }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">兼容版本</span>
            <span class="info-value">{{ plugin.compatibleVersion }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">开发者</span>
            <span class="info-value">{{ plugin.developer }}</span>
          </div>
          <div class="info-item" v-if="plugin.contact">
            <span class="info-label">联系方式</span>
            <span class="info-value">{{ plugin.contact }}</span>
          </div>
        </div>
      </div>
      
      <!-- 描述信息 -->
      <div class="info-section">
        <h3 class="section-title">描述</h3>
        <p class="description">{{ plugin.description }}</p>
      </div>
      
      <!-- 依赖项 -->
      <div class="info-section" v-if="plugin.dependencies && plugin.dependencies.length">
        <h3 class="section-title">依赖项</h3>
        <ul class="dependency-list">
          <li v-for="(dep, index) in plugin.dependencies" :key="index">{{ dep.id }}</li>
        </ul>
      </div>
      
      <!-- 扩展点 -->
      <div class="info-section" v-if="plugin.extensionPoints && plugin.extensionPoints.length">
        <h3 class="section-title">扩展点</h3>
        <ul class="extension-list">
          <li v-for="(point, index) in plugin.extensionPoints" :key="index">{{ point.id }}</li>
        </ul>
      </div>
      
      <!-- 插件配置文件 -->
      <div class="info-section">
        <h3 class="section-title">插件配置文件</h3>
        <div class="config-file">
          <pre class="xml-code" v-html="getFormattedXml()"></pre>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PluginDetail } from '@/api/plugin'

interface Props {
  visible: boolean
  plugin: PluginDetail | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
}>()

// 对话框显示状态
const dialogVisible = ref(false)

// 监听visible属性变化
watch(() => props.visible, (val) => {
  dialogVisible.value = val
})

// 监听对话框状态变化
watch(() => dialogVisible.value, (val) => {
  emit('update:visible', val)
})

// 获取格式化并高亮的XML配置
function getFormattedXml() {
  if (!props.plugin) return ''
  
  // 生成XML内容
  const xml = `<!-- Plugin Configuration File. Read more: https://plugins.jetbrains.com/docs/intellij/plugin-configuration-file.html -->
<idea-plugin>
  <idea-version since-build="${props.plugin.compatibleVersion?.split(' - ')[0] || '231'}" until-build="${props.plugin.compatibleVersion?.split(' - ')[1] || '243.*'}" />
  <version>${props.plugin.version}</version>
  <!-- Unique identifier of the plugin. It should be FQN. It cannot be changed between the plugin versions. -->
  <id>${props.plugin.id}</id>
  <!-- Public plugin name should be written in Title Case. -->
  <name>${props.plugin.name}</name>
  <!-- A displayed Vendor name or Organization ID displayed on the Plugins Page. -->
  <vendor email="${props.plugin.email || '824000672@qq.com'}" url="${props.plugin.email || '824000672@qq.com'}">${props.plugin.developer}</vendor>
  <!-- Description of the plugin displayed on the Plugin Page and IDE Plugin Manager.
       Simple HTML elements (text formatting, paragraphs, and lists) can be added inside of <![CDATA[ ]]> tag.
       Guidelines: https://plugins.jetbrains.com/docs/marketplace/plugin-overview-page.html#plugin-description -->
  <description><![CDATA[${props.plugin.description}]]></description>

  <depends>com.intellij.modules.platform</depends>
  ${props.plugin.dependencies?.map(dep => `<depends>${dep.id}</depends>`).join('\n  ') || ''}
  
  <!-- Extension points -->
  ${props.plugin.extensionPoints?.length ? `<extensionPoints>
    ${props.plugin.extensionPoints.map(ext => `<extensionPoint name="${ext.id}"
      description="${ext.description}"
      interface="${ext.name}" />`).join('\n    ')}
  </extensionPoints>` : ''}
</idea-plugin>`
  
  // 添加语法高亮
  return xml
    // 将<和>转义为HTML实体
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    // XML注释
    .replace(/&lt;!--([\s\S]*?)--&gt;/g, '<span class="xml-comment">&lt;!--$1--&gt;</span>')
    // XML标签
    .replace(/&lt;(\/?)([\w-]+)(?=[\s>])/g, '&lt;$1<span class="xml-tag">$2</span>')
    .replace(/(\/?)([\w-]+)&gt;/g, '<span class="xml-tag">$1$2</span>&gt;')
    // XML属性
    .replace(/\s([\w-]+)=/g, ' <span class="xml-attr">$1</span>=')
    // XML属性值
    .replace(/="([^"]*)"/g, '="<span class="xml-value">$1</span>"')
    // CDATA
    .replace(/&lt;!\[CDATA\[([\s\S]*?)\]\]&gt;/g, '&lt;![CDATA[<span class="xml-cdata">$1</span>]]&gt;')
}
</script>

<style scoped>
.plugin-detail-dialog :deep(.el-dialog) {
  width: 800px;
  max-width: 95%;
  border-radius: 12px;
  overflow: hidden;
}

.detail-content {
  padding: 0;
}

.info-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 12px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 14px;
  color: #757575;
  margin-bottom: 4px;
}

.info-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.description {
  white-space: pre-line;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 12px;
  margin: 0;
}

.dependency-list,
.extension-list {
  list-style-type: disc;
  padding-left: 24px;
  margin: 0;
  background-color: #f8f9fa;
  padding: 16px 16px 16px 36px;
  border-radius: 12px;
}

.dependency-list li,
.extension-list li {
  margin-bottom: 8px;
  color: #333;
}

.config-file {
  background-color: #1e1e1e;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
}

.xml-code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #d4d4d4;
  margin: 0;
}

:deep(.xml-tag) {
  color: #569cd6;
}

:deep(.xml-attr) {
  color: #9cdcfe;
}

:deep(.xml-value) {
  color: #ce9178;
}

:deep(.xml-comment) {
  color: #6a9955;
}

:deep(.xml-cdata) {
  color: #e9a668;
}

:deep(.el-dialog__header) {
  padding: 20px;
  margin-right: 0;
  border-bottom: 1px solid #eee;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
}

:deep(.el-dialog__headerbtn) {
  top: 20px;
  right: 20px;
}

:deep(.el-dialog__close) {
  font-size: 18px;
}
</style> 